<template>
	<el-tabs type="border-card" @tab-click="changeTag" v-model="activeName">
		<el-tab-pane v-for="(item,index) in data.list" :key="index" :name="item.id" :lazy="true">
			<template #label>
				<span> <i v-if="item.icon" :class="item.icon"></i> {{item.title}}</span>
			</template>
			<config v-model:config="data.config" />
			<el-button @click="save()">保存</el-button>
		</el-tab-pane>

	</el-tabs>
</template>

<script>
	import {
		ElMessage
	} from 'element-plus'
	import {
		getTags,
		getConfig,
		saveConfig
	} from '/@/api/system.js'
	import {
		reactive,
		onMounted,
		toRefs,
		computed,
		ref,
		watch
	} from 'vue'
	import config from '/@/components/from/SystemConfig.vue'
	import {
		useRoute
	} from "vue-router"
	export default {
		name: "systemTags",
		components: {
			config
		},
		setup() {
			const route = useRoute(); // 第一步
			const data = reactive({
				list: [],
				config: []
			})
			const activeName = ref(0);
			const save = () => {

				let dd = data.config;

				if (dd && dd.length > 0) {
					saveConfig(dd).then(res => {
						ElMessage({
							message: res.message || '保存成功',
							type: 'success',
							duration: 3000
						})
					})
				}

			}
			const changeTag = (tab, event) => {
				console.log(tab, event, '>>>>')
			}

			const getConfigList = (tid) => {
				getConfig({
					tid: tid
				}).then(res => {
					data.config = res.data
				})
			}

			onMounted(() => {
				console.log('>>>>>>>>>>>>>>>>>config>>>>>>>>>>>>>>', JSON.stringify(route.params))
				getTags({
					type: route.query.type || 0,
					id: route.query.id
				}).then(res => {
					data.list = res.data
					if (data.list && data.list.length > 0)
						activeName.value = data.list[0].id
				})
			})
			watch(activeName, (np, op) => {
				if (np) {
					getConfigList(np)
				}
			})
			return {
				data,
				save,
				changeTag,
				activeName
			}
		}
	}
</script>

<style>
</style>